<template>
	<view class="">
		<view class="u-m-p-50">
			<view class="u-demo-area u-flex u-row-center">
				<!-- 下拉选项列表 -->
				<u-dropdown :close-on-click-mask="true" ref="uDropdown" activeColor="#2979ff" :borderBottom="true">
					<u-dropdown-item @change="change" v-model="value1" title="私密" :options="options1"></u-dropdown-item>
					<u-dropdown-item @change="change1" v-model="value2" title="评论" :options="options2"></u-dropdown-item>
					<u-dropdown-item title="话题分类" >
						<view class="slot-content">
							<view class="item-box">
								<view class="item" :class="[item.type==1? 'active' : '']" @tap="tagClick(index)" v-for="(item, index) in titleClass" :key="index">
									{{item.title}}
								</view>
							</view>
							<u-button type="primary" @click="closeDropdown">确定</u-button>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				value1: '0',
				value2: '0',
				options1: [
					{
						label: '他人可见',
						value: 0,
					},{
						label: '私密话题，他人不可见',
						value: 1,
					}
				
				],
				options2: [{
						label: '可评论',
						value: 0,
					},
					{
						label: '不可评论',
						value: 1,
					},
				],
				titleClass:[],
				navMsg:{
					password:'',
					isclose:'',
					arr:[]
				},
				
			}
		},
		created() {
			// 获取文章
			this.$api.gettitleClass().then(
				(res) => {
					this.titleClass = res
				},
				(err) => {
					console.log(err);
				}
			)
		},
		methods: {
			change(index) {//点击第一个选择列表触发的回调
				if(index==1){
					this.navMsg.password=true
				}else{
					this.navMsg.password=false
				}
				this.$u.toast(this.options1[index].label);
			},
			change1(index) {
				this.navMsg.isclose=index
				this.$u.toast(this.options2[index].label);
			},
			//关闭显示的下拉列表
			closeDropdown() {
				let arr = []
				this.titleClass.forEach(item=>{
					if(item.type==1){
						arr.push(item.cid)
					}
				})
				this.navMsg.arr=arr
				this.$emit('titleClass',this.navMsg)
				this.$refs.uDropdown.close();
			},
			tagClick(index) {//渲染时，根据type值来给选择分类按钮样式赋样式
				+this.titleClass[index].type==1? +this.titleClass[index].type--:+this.titleClass[index].type++
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.u-config-wrap {
		padding: 40rpx;
	}
	
	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;
		
		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}
			
			.active {
				color: #FFFFFF;
				background-color: $u-type-primary;
			}
		}
	}
</style>
